<template>
	<view class="main">

        <ul class="nav">
			<!-- <li :class = "{active:!(1-menuIndex)}" @click = 'menuShow(0)'>
				全部
			</li> -->
			
			<li v-for="(item,index) in navList" :key="index" :class = "{active:!(index-menuIndex)}" @click = 'menuShow(index,item.id)'>
					{{item.title}}({{item.num}}) 
			</li>
		</ul>
		
        <view class="hu" >
            <hxele :jdata="huxing"></hxele>
        </view>

        <!-- <view class="hu" v-show = 'menuIndex == 1'>
            <hxele></hxele>
        </view> -->
		
	</view>
</template>

<script>
    import Hxele from 'pages/index/details/Hxele'

	export default {
        components: {	
            Hxele
		},
		data() {
			return {
				loupan_id:0,
				huxing_id:0,
				menuIndex:0,
				navList:[],
				huxing:[]
			}
		},
		
		onLoad(e) {
			this.loupan_id = e.loupan_id;
			this.initData();
		},
		
		methods: {
			initData() {
				let _this = this;
				this.$api.getPageUnit({
						loupan_id:_this.loupan_id,
						huxing_id:_this.huxing_id
					},
					res => {
						this.loupam_num = res.loupam_num;
						this.navList = [{title:'全部',num:res.loupam_num,id:0}];
						for(let i=0;i<res.huxing_info.length;i++){
							this.navList.push(res.huxing_info[i]); 
						}
						this.huxing = res.huxing;
					}
				);
			},
			menuShow (index,huxing_id) {
				this.menuIndex = index;
				this.huxing_id = huxing_id;
				this.initData();
			}
		}
	}
</script>

<style scoped>
	*{
		list-style: none;
		padding: 0 ;
		margin: 0;
	}

    .nav{
        padding-top: 40upx;
    }
    .main{
        background: #fff;
    }
	.main>ul{
		width: 600upx;
		display: flex;
		flex-wrap: nowrap;
		/* margin: 0 auto; */
        margin-left: 40upx;
		padding-bottom: 10upx;
	}
	.main>ul>li{
		height: 54upx;
		width: 148upx;
		text-align: center;
		line-height: 54upx;
        color: #77808a;
		font-size: 24upx;
        border-radius:6upx; 
	}
	.active{	
        background: #13c3c3;
        border-radius:6upx;       
	}

    .hu{
        margin: 0 40upx 0 40upx;
    }

</style>
